<template>
  <div>
      <h3>统计时间</h3>
      <h5>总成交额：{{selflist.estimated}}</h5>
      <h5>统计时间:{{selflist.time}}</h5>
    <div id="myChart" :style="{ width: '100%', height: '300px' }">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'MyEcharts',
  data() {
    return {
      data: this.selflist
    }
  },
  props: ['selflist'],
  watch:{
    selflist:function(){
      this.drawLine()
    }
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        // 全局调色盘。
        tooltip: {},
        xAxis: {
          data: ['总销售量', '车辆总数', '已发布数量', '已预约数量', '已入库数量']
        },
        yAxis: {
          // type: 'value',
          name: '单位：辆：'
        },
        series: [
          {
            type: 'bar',
            data: this.data.data,
            itemStyle: {
              color: function (params) {
                var colorlist = ['#DA251D', '#E67716', '#FBC300', '#11440f', '#32585a', '#00ff77']
                return colorlist[params.dataIndex]
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold',
                color: '#000',
                position: 'top'
              }
            }
          }
        ]
      })
      window.onresize = function () {
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
